<div class="change-password-container">
  <div class="change-password-wrapper">
    <p-card class="change-password-card p-fluid">

      <ng-template pTemplate="content">
        <form #changePasswordForm="ngForm" (ngSubmit)="changePassword()">
          <div class="p-field">
            <label for="currentPassword">Current Password</label>
            <p-password id="currentPassword" [(ngModel)]="currentPassword" name="currentPassword" [feedback]="false" required fluid></p-password>
          </div>

          <div class="p-field">
            <label for="newPassword">New Password</label>
            <p-password id="newPassword" [(ngModel)]="newPassword" name="newPassword" [feedback]="false" required fluid></p-password>
          </div>

          <div class="p-field">
            <label for="confirmNewPassword">Confirm New Password</label>
            <p-password id="confirmNewPassword" [(ngModel)]="confirmNewPassword" name="confirmNewPassword" [feedback]="false" required fluid></p-password>
            @if (!passwordsMatch && confirmNewPassword) {
              <p-message severity="error" text="New passwords do not match."></p-message>
            }
          </div>

          <p-button type="submit" label="Change Password" icon="pi pi-key" class="p-fluid"></p-button>

          @if (errorMessage) {
            <p-message severity="error" text="{{ errorMessage }}"></p-message>
          }
          @if (successMessage) {
            <p-message severity="success" text="{{ successMessage }}"></p-message>
          }
        </form>
      </ng-template>
    </p-card>
  </div>
</div>
